<template>
    <div class="app-wrapper">
        <div class="link-wrapper">
            <img src="./assets/img/bg-1.png" class="logo-img">
            <router-link class="link" to="/">首页</router-link>
            <router-link class="link" to="/demo">展示</router-link>
        </div>
        <keep-alive>
            <router-view></router-view>
        </keep-alive>
    </div>
</template>

<script>
    export default {
        name: 'App'
    }
</script>

<style lang="stylus" scoped>
.link-wrapper
    width 100%
    background-image: linear-gradient(to right, black, grey, black);
    box-sizing border-box
    height 37px
    padding 8px 0
    display flex 
    justify-content space-around
    position relative
.logo-img 
    position absolute 
    width 22px
    height 22px
    left: 15px
    border-radius 50%
.link
    text-decoration none
    color #fff
.router-link-exact-active
    color gold
</style>
